<template>
  <!-- 门店管理 -->
  <div class="main-box">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="门店" :required="true">
                <a-select placeholder="请选择门店" v-model="pagination.storeId">
                  <a-select-option
                    :value="item.storeId"
                    v-for="(item, index) in storesList"
                    :key="index">{{
                      item.storeName
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="日期" :required="true">
                <!-- :disabled-date="disabledDate" -->
                <a-date-picker
                  placeholder="请选择日期"
                  v-model="pagination.storesDate"
                  :value-format="formatTime" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24" style=" margin-bottom: 20px;">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="filter-container">
        <template>
          <a-button
            type="primary"
            icon="plus"
            @click="onFillData"
            style="margin-right: 20px;"
            v-checkBtn="'fill:data:trace'">
            填报
          </a-button>
          <a-button type="primary" @click="onExcel" v-checkBtn="'trace:exportExcel'">
            导出
          </a-button>
        </template>
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :rowKey="(record, index) => { return index }"
        :scroll="{ x: 900, y: 500 }"
        :pagination="false">
        <template slot="earlyWarning" slot-scope="text, record">
          <div v-if="Number(record.practicalFull) > 0">
            <span v-if="record.inOrOut == 1" :class="getTinct(record) < 100 ? 'actionColor' : 'defaultColor'">{{
              getTinct(record) + '%' }}</span>
            <span
              v-else-if="record.inOrOut == 2"
              :class="getTinct(record) < 100 ? 'defaultColor' : 'actionColor'">{{ getTinct(record) + '%'
              }}</span>
            <span v-else>{{ getTinct(record) + '%' }}</span>
          </div>
          <div v-else>
            <span>{{ getTinct(record) + '%' }}</span>
          </div>

        </template>
      </a-table>
    </a-card>
    <!-- 填报 -->
    <fillDataModal ref="fillDataModal" v-if="dialog.fillData" @success="tableData" @close="dialog.fillData = false">
    </fillDataModal>
  </div>
</template>

<script>

import { getTrace, getTraceExportExcel } from '@/api/budget'

import { getStores } from '@/api/stores'
import fillDataModal from './fillData'
import moment from 'moment'
export default {
    components: { fillDataModal },
    data () {
        return {
            columns: [
                {
                    title: '预算科目',
                    dataIndex: 'subject',
                    key: 'subject',
                    align: 'center',
                    width: 100
                },
                {
                    title: '全月预算',
                    dataIndex: 'fullMonthlyBudget',
                    key: 'fullMonthlyBudget',
                    align: 'center',
                    width: 100
                },
                {
                    title: '全月完成率',
                    dataIndex: 'fullMonthRate',
                    key: 'fullMonthRate',
                    align: 'center',
                    width: 100
                },
                {
                    title: '理论应该完成',
                    dataIndex: 'fullTheory',
                    key: 'fullTheory',
                    align: 'center',
                    width: 100
                },
                {
                    title: '本月实际累计',
                    dataIndex: 'practicalFull',
                    key: 'practicalFull',
                    align: 'center',
                    width: 100
                },
                {
                    title: '进度预警',
                    dataIndex: 'earlyWarning',
                    key: 'earlyWarning',
                    align: 'center',
                    width: 100,
                    scopedSlots: { customRender: 'earlyWarning' }
                },
                {
                    title: '本月未完成目标',
                    dataIndex: 'unfinished',
                    key: 'unfinished',
                    align: 'center',
                    width: 200
                }
            ],
            dataSource: [
                // { subject: '折后营收', fullMonthlyBudget: '68,633.77', fullMonthRate: '68%', fullTheory: '525989.03', practicalFull: '436,063.38', earlyWarning: '82.90%', unfinished: '191072.63' },
                // { subject: '成本额', fullMonthlyBudget: '68,633.77', fullMonthRate: '68%', fullTheory: '525989.03', practicalFull: '436,063.38', earlyWarning: '82.90%', unfinished: '191072.63' },
                // { subject: '费用额', fullMonthlyBudget: '68,633.77', fullMonthRate: '68%', fullTheory: '525989.03', practicalFull: '436,063.38', earlyWarning: '82.90%', unfinished: '191072.63' },
            ],
            dialog: {
                save: false
            },
            loading: false,
            storesList: [], // 门店
            pagination: {
                // 分页配置
                // pageSize: 6, // 每页显示的条数
                // showQuickJumper: true, // 是否可以快速跳转到指定页
                // showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                // current: 1, // 当前页数
                // total: 10, // 总条数
                storesDate: '',
                storeId: undefined
                // onChange: this.handlePageChange // 页码改变时的回调函数
            },
            formatTime: 'YYYY-MM-DD',
            dialog: {
                fillData: false
            }
        }
    },
    mounted () {
        // this.tableData()
        // let par = {
        //     storesId: '2171479630393159',
        //     storesDate: '2023-11-15'
        // }
        // console.log(par)
        // getTrace(par).then(res => {
        //     console.log(res)
        // })
        getStores({ storeName: '' }).then(res => {
            if (res.code == 200) {
                this.storesList = res.data
            }
        })
    },
    methods: {
        // 导出excel
        onExcel () {
            const { storesDate, storeId } = this.pagination
            const par = {
                storesDate,
                storeId: storeId == undefined ? '' : storeId
            }
            if (par.storeId == '') {
                this.$notification['error']({
                    message: '提示',
                    description: '请选择门店',
                    duration: 8
                })
                return
            }
            if (par.storesDate == '') {
                this.$notification['error']({
                    message: '提示',
                    description: '请选择日期',
                    duration: 8
                })
                return
            }
            getTraceExportExcel(par).then(res => {
                const dataExcel = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                })
                const downloadUrl = window.URL.createObjectURL(dataExcel)
                const anchor = document.createElement('a')
                anchor.href = downloadUrl
                anchor.download = '预算.xls' // 表格名称.文件类型
                anchor.click()
                window.URL.revokeObjectURL(res) // 消除请求接口返回的list数据
            })
        },
        getTinct (item) {
            let warning = '0.00'
            if (Number(item.fullTheory) == 0) {
                warning = '0.00'
            } else {
                warning = ((Number(item.practicalFull) / Number(item.fullTheory)) * 100).toFixed(2)
            }
            return warning
        },
        // 填报
        onFillData () {
            this.dialog.fillData = true
            this.$nextTick(() => {
                this.$refs.fillDataModal.open()
            })
        },
        disabledDate (current) {
            return current && current > moment().endOf('day')
        },
        // 搜索
        onSearch () {
            // this.pagination.current = 1
            // this.pagination.pageSize = 6
            const { storesDate, storeId } = this.pagination
            const par = {
                storesDate,
                storeId: storeId == undefined ? '' : storeId
            }
            if (par.storeId == '') {
                this.$notification['error']({
                    message: '提示',
                    description: '请选择门店',
                    duration: 8
                })
                return
            }
            if (par.storesDate == '') {
                this.$notification['error']({
                    message: '提示',
                    description: '请选择日期',
                    duration: 8
                })
                return
            }

            getTrace(par).then(res => {
                if (res.code == 200) {
                    if (res.data.datas.length == 0) {
                        this.$notification['error']({
                            message: '提示',
                            description: '搜索结果为空',
                            duration: 8
                        })
                        return
                    }
                    this.dataSource = res.data.datas
                }
            })
            // this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                // pageSize: 6, // 每页显示的条数
                // showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                // current: 1, // 当前页数
                // total: 10, // 总条数
                storesDate: '',
                storeId: undefined
            }
            this.tableData()
        },

        // handlePageChange(page, pageSize) {
        //     this.pagination.current = page
        //     this.tableData()
        // },
        // 新增
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        // 编辑
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        tableData () {
            // this.loading = true
            const { storesDate, storeId } = this.pagination
            const par = {
                storesDate,
                storeId: storeId == undefined ? '' : storeId
            }
            getTrace(par).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.dataSource = res.data.datas
                    // this.pagination.total = res.data.total
                }
                this.loading = false
            })
        }
    }
}
</script>

<style scoped lang="less" >
.defaultColor {
    color: #000;
}

.actionColor {
    color: #f50;
}

.tag-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .tag-item {
        margin-bottom: 4px;
    }
}

.main-box {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 2px;
}

.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

.lesseeAdd {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
}

/deep/ .ant-modal {
    min-width: 700px;
    margin-left: 30%;
}
</style>
